<template>
    <div class="counter__wrapper">
        <div class="row g-5">
            <div class="col-md-3 col-6">
                <div class="counter__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                    <div class="counter__item-inner">
                        <div class="counter__item-thumb">
                            <img src="/images/counter/home3/1.png" alt="count-icon">
                        </div>
                        <div class="counter__item-content">
                            <h3>
                                <Counter parentQuerySelector=".counter__wrapper" class="counter" end="20" />K+
                            </h3>
                            <p>Student</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="counter__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                    <div class="counter__item-inner">
                        <div class="counter__item-thumb">
                            <img src="/images/counter/home3/2.png" alt="count-icon">
                        </div>
                        <div class="counter__item-content">
                            <h3>
                                <Counter parentQuerySelector=".counter__wrapper"  class="counter" end="20" />K+
                            </h3>
                            <p>Quality Courses</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="counter__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
                    <div class="counter__item-inner">
                        <div class="counter__item-thumb">
                            <img src="/images/counter/home3/3.png" alt="count-icon">
                        </div>
                        <div class="counter__item-content">
                            <h3>
                                <Counter parentQuerySelector=".counter__wrapper"  class="counter" end="10" />Y+
                            </h3>
                            <p>Expreience </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="counter__item" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
                    <div class="counter__item-inner">
                        <div class="counter__item-thumb">
                            <img src="/images/counter/home3/4.png" alt="count-icon">
                        </div>
                        <div class="counter__item-content">
                            <h3>
                                <Counter parentQuerySelector=".counter__wrapper"  class="counter" end="10" />K
                            </h3>
                            <p>Achievement </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Counter from "@/components/base/Counter.vue";
export default {
    components: { Counter }
}
</script>